<template>
<div>


  <div class="app">



       <div class="deliveryboy">
           <span >总计:</span>
           <!-- <span v-if='totalsong==true'>送货员:{{deliveryForm.name}}</span> -->
      </div>
      <div class="content">
          <!-- <div class="content_one">
            <span>收款金额：{{ item.paymentAmt}}</span>
            <span>退款金额：{{ item.refundsAmt}}</span>
            <span>回收水票：{{ item.paymentQry}}</span>
            <span>压桶数:{{item.plegeQry}}</span>

          </div>
          <div class="content_two">
          <span>压桶金额:{{item.plegeAmt}}</span>
            <span>退桶金额:{{item.returnAmt}}</span>
            <span>退桶数:{{item.returnQry}}</span>
            <span>客户欠桶:{{item.oweQry}}</span>
            <span>客户存桶:{{item.storeQry}}</span>
          </div> -->
          <div class="content_one">
            <span>收款金额：{{ delivery(deliveryForm.paymentAmt)}}</span>
            <span>退款金额：{{ delivery(deliveryForm.refundsAmt)}}</span>
          </div>
            <div class="content_one">
              <span>退桶数:{{delivery(deliveryForm.returnQry)}}</span>
            <span>压桶数:{{deliveryForm.plegeQry}}</span>
          </div>
            <div class="content_one">
               <span>压桶金额:{{delivery(deliveryForm.plegeAmt)}}</span>
            <span>退桶金额:{{delivery(deliveryForm.returnAmt)}}</span>
          </div>
            <div class="content_one">

            <span>客户欠桶:{{delivery(deliveryForm.oweQry)}}</span>
            <span>客户存桶:{{delivery(deliveryForm.storeQry)}}</span>
          </div>




      </div>
      <div class="summary">
        <div style="display:flex;padding-left:20px">
          <div style="margin-right:10px">
             <span>实际回桶:</span>
              <span  style="color:red" >{{delivery(deliveryForm.effectiveQry)}}</span>

          </div>

           <div style="margin-right:10px">
             <span >实收金额:</span>
              <span  style="color:red">{{delivery(deliveryForm.effectiveAmt)}}</span>
          </div>
           <div>
             <span >实收水票:</span>
              <span style="color:red">{{delivery(deliveryForm.paymentQry)}}</span>
          </div>
        </div>

        <div>
        <!-- <el-button type="primary">核销</el-button> -->
          <el-button type="warning" @click="writeoff" style="margin-left:20px">一键核销</el-button>

        </div>
      </div>



  </div>
  </div>
</template>

<script>
import {completeBatch} from '@/api/shippingSettle'
// import utils from '../../../utils/utils.js'
import utils from '../../../utils/utils'
  export default {
    data() {
      return {}
    },
    props: [
      'deliveryForm','totalsong'
    ],

  created(){
  },
    methods: {

   delivery(val){
     if(utils.isNull(val)){
       return '0.00'
     }else{
       return val.toFixed(2)
     }
   },

   writeoff(){
  completeBatch().then(res=>{
      console.log(res);
      if(res.type=='success'){
         this.$message('核销成功');
      }else{
         this.$message.error('核销失败');
      }
  })


}
    },

  }
</script>

<style scoped>
.app{
  height: 80px;
  width: 100%;
  display: flex;
  /* justify-content: space-around; */
  background-color: rgba(233 ,235,236);
}
.deliveryboy{
  height: 100%;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: rgb(245,247,250) 1px solid;
}
.content{
  height: 100%;
  width: 700px;
  display: flex;
  justify-content: space-around;

}
.content_one{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* .content_one span{
  margin-right: 10px;
  display: inline-block;
  width: 150px;
}
.content_two span{
  margin-right: 10px;
  display: inline-block;
  width: 150px;
} */
.summary{
   height: 100%;
   paddding-top:40px;
   paddding-left:40px;
   display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 20px;
    border-left: rgb(245,247,250) 1px solid;
  /* border-left-style: solid;
  border-left-color: white; */
}
</style>
